<template>
	<view>
		<view class="tips">用车费用</view>
		<view class="flex_start money_box">
			<image src="../../static/img/money_icon.png" class="money_icon" mode=""></image>
			<view class="">15.90</view>
		</view>
		<view class="address">金牛区兴源绿洲-金牛区火车北站</view>
		<view class="title flex_start">请选择付款方式</view>
		<view class="uni-list">
			<radio-group>
					<label :data-index="current" class="uni-list-cell uni-list-cell-pd flex_start" v-for="(item, index) in items" @click="radioClick(index)" :key="index">
							<view class="flex_start pay_box">
								<image :src="item.icon" class="pay_icon" mode=""></image>
								<view class="">
									<view class="pay_name">{{item.name}}</view>
									<view class="">{{item.remarks}}</view>
								</view>
							</view>
							<view>
									<!-- <radio color="#ffb025" :checked="index === current" /> -->
									<image src="../../static/img/checked.png" class="check_icon" mode="" v-if="index == current"></image>
									<image src="../../static/img/check.png" class="check_icon" mode="" v-else></image>
							</view>
					</label>
			</radio-group>
		</view>
		<view class="btn flex_start">确认支付</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				items: [{
						icon: require("../../static/img/WeChat.png"),
						name: '微信支付',
						remarks:'微信支付，方便快捷'
				},
				// {
				// 		icon: require("../../static/img/alipay.png"),
				// 		name: '支付宝支付',
				// 		remarks:'推荐有支付宝账号的用户使用'
				// },
				{
						icon: require("../../static/img/balance.png"),
						name: '余额支付',
						remarks:'直接用钱包零钱进行支付'
				}],
				current: 1
			};
		},
		methods:{
			radioClick(index){
				this.current = index
			},
		}
	}
</script>

<style lang="scss">
.btn{
	background: #ffb025;
	width: 580rpx;
	height: 104rpx;
	border-radius: 50rpx;
	justify-content: center;
	font-size: 34rpx;
	color: white;
	margin: 84rpx auto 0;
}
.check_icon{
	width: 40rpx;
	height: 40rpx;
}
.uni-list-cell{
	justify-content: space-between;
	margin: 0 26rpx;
	padding: 30rpx 0;
	border-bottom: 2rpx solid #E6E6E6;
	color: #949492;
	font-size: 24rpx;
}
.pay_box{
	.pay_icon{
		width: 76rpx;
		height: 76rpx;
		margin-right: 16rpx;
	}
	.pay_name{
		color: #333333;
		font-size: 30rpx;
		margin-bottom: 10rpx;
	}
}
.title{
	font-size: 26rpx;
	color: #333333;
	height: 60rpx;
	padding-left: 28rpx;
	margin-top: 68rpx;
	background: #F6F5F5;
}
.tips{
	color: #666666;
	font-size: 34rpx;
	margin: 88rpx 0 20rpx;
	text-align: center;
}
.money_box{
	justify-content: center;
	color: #333333;
	font-size: 84rpx;
	.money_icon{
		width: 28rpx;
		height: 38rpx;
		position: relative;
		top: 16rpx;
	}
}
.address{
	text-align: center;
	color: #666666;
	font-size: 28rpx;
}
</style>
